<template>
  <div>

	  <myheader></myheader>

	  <br /><br />

	  <Breadcrumb :datas="datas"></Breadcrumb>
	
	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				用户名: <input type="text" v-model="username">
			</div>
			<br><br>
			<div>
				密&nbsp;&nbsp;&nbsp;码: <input type="password" v-model="password">
			</div>
			<br><br>
			<div>
				验证码: <input type="text" v-model="code">
			</div>
			<br><br>
			<img @click="change_img" :src='src'>
			<br><br>
			<div>
				<Button @click="submit">提交</Button>
			</div>
		</div>
	</section>
	
	<mufooter></mufooter>

  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';


export default {
  data () {
    return {
		//声明面包屑导航变量
	datas:[{title:"首页",route:{name:'index'}},{title:'注册页面',route:{name:'register'}}],
	  msg: "这是一个变量",
	  username:'',
	  password:'',
	  code:'',
	  src:'http://localhost:8000/code/',
    }
  },
  //定义组件
  components:{
	  'myheader':myheader,
	  'mufooter':myfooter
	},
  mounted:function(){
  
},
  methods:{
	  //点击切换验证码
	  change_img:function(){
		  //定义随机数
		  var num = Math.ceil(Math.random()*10);
		  //将图片刷新
		  this.src = this.src + "?code=" + num;
	  },
	  //提交事件
	  submit:function(){

		  //判断用户是否输入
		  if(this.username == ""){
			  this.$Message("用户名不能为空");
			  return false;
		  }
		  if(this.password == ""){

			  this.$Message("密码不能为空")
			  return false
		  }

		  //请求后台接口
		  this.axios.get('http://localhost:8000/register/',{params:{username:this.username,
		  password:this.password,code:this.code}})
		  .then((result) =>{
			  console.log(result.data.message);

		  })

	  }
     
  }
}


</script>
 
<style>



</style>